<template>
  <div class="material-list-page">
    <!-- 搜索区域 -->
    <el-form :inline="true" size="default" class="search-bar" @submit.prevent>
      <el-form-item label="物料名称">
        <el-input v-model="search.name" placeholder="输入名称关键字" clearable />
      </el-form-item>
      <el-form-item label="分类">
        <el-select v-model="search.category" placeholder="全部" clearable style="width: 120px;">
          <el-option v-for="c in categoryOptions" :key="c" :label="c" :value="c" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
      <el-form-item style="float:right;margin-left:30px;">
        <el-button type="success" @click="onAdd">新增物料</el-button>
      </el-form-item>
    </el-form>

    <!-- 物料表格 -->
    <el-table :data="filteredList" stripe border style="margin-top:10px;">
      <el-table-column prop="code" label="物料编码" min-width="130" />
      <el-table-column prop="name" label="物料名称" min-width="140" />
      <el-table-column prop="model" label="规格型号" min-width="100" />
      <el-table-column prop="unit" label="单位" width="70" />
      <el-table-column prop="category" label="分类" min-width="100" />
      <el-table-column prop="safeStock" label="安全库存" width="100" />
      <el-table-column prop="currentStock" label="当前库存" width="100" />
      <el-table-column prop="enabled" label="启用" width="80">
        <template #default="{ row }">
          <el-tag :type="row.enabled ? 'success' : 'info'">
            {{ row.enabled ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="110" />
      <el-table-column label="操作" fixed="right" width="140">
        <template #default="{ row, $index }">
          <el-button size="small" @click="onEdit(row, $index)">编辑</el-button>
          <el-button size="small" type="danger" @click="onDelete($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑/新增弹窗 -->
    <el-dialog v-model="editDialog.visible" :title="editDialog.isEdit ? '编辑物料' : '新增物料'" width="480px">
      <el-form :model="editDialog.form" label-width="88px">
        <el-form-item label="物料编码">
          <el-input v-model="editDialog.form.code" />
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="editDialog.form.name" />
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="editDialog.form.model" />
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="editDialog.form.unit" />
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="editDialog.form.category">
            <el-option v-for="c in categoryOptions" :key="c" :label="c" :value="c" />
          </el-select>
        </el-form-item>
        <el-form-item label="安全库存">
          <el-input-number v-model="editDialog.form.safeStock" :min="0" />
        </el-form-item>
        <el-form-item label="当前库存">
          <el-input-number v-model="editDialog.form.currentStock" :min="0" />
        </el-form-item>
        <el-form-item label="启用状态">
          <el-switch v-model="editDialog.form.enabled" active-text="启用" inactive-text="停用" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editDialog.form.remark" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialog.visible = false">取消</el-button>
        <el-button type="primary" @click="onSaveEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

// 模拟数据
const materialList = ref([
  { code: 'MAT-202406-001', name: '盐酸氯丙嗪原料', model: '25kg/桶', unit: 'kg', category: '原料药', safeStock: 200, currentStock: 380, enabled: true, remark: '需避光保存' },
  { code: 'MAT-202406-002', name: '无菌注射用水', model: '500ml/瓶', unit: '瓶', category: '辅料', safeStock: 500, currentStock: 620, enabled: true, remark: '' },
  { code: 'MAT-202406-003', name: '聚丙烯输液瓶', model: '100ml', unit: '个', category: '包装材料', safeStock: 2000, currentStock: 1850, enabled: true, remark: '' },
  { code: 'MAT-202406-004', name: '双氯芬酸钠', model: '5kg/袋', unit: 'kg', category: '原料药', safeStock: 120, currentStock: 135, enabled: true, remark: '' },
  { code: 'MAT-202406-005', name: '输液用橡胶塞', model: '20mm', unit: '个', category: '包装材料', safeStock: 3000, currentStock: 4200, enabled: true, remark: '消毒后使用' },
  { code: 'MAT-202406-006', name: '复方氨基酸溶液', model: '250ml/袋', unit: '袋', category: '制剂成品', safeStock: 300, currentStock: 220, enabled: false, remark: '库存低于安全线' },
  { code: 'MAT-202406-007', name: '青霉素钾', model: '10kg/箱', unit: 'kg', category: '原料药', safeStock: 80, currentStock: 100, enabled: true, remark: '' },
  { code: 'MAT-202406-008', name: '吸管组件', model: '30cm', unit: '套', category: '包装材料', safeStock: 500, currentStock: 480, enabled: true, remark: '' },
  { code: 'MAT-202406-009', name: '葡萄糖注射液', model: '500ml/瓶', unit: '瓶', category: '制剂成品', safeStock: 400, currentStock: 430, enabled: true, remark: '' },
  { code: 'MAT-202406-010', name: '硫酸庆大霉素', model: '2kg/瓶', unit: 'kg', category: '原料药', safeStock: 60, currentStock: 55, enabled: false, remark: '临期物料' },
  { code: 'MAT-202406-011', name: 'PE袋', model: '40*60cm', unit: '个', category: '包装材料', safeStock: 1000, currentStock: 1200, enabled: true, remark: '' },
  { code: 'MAT-202406-012', name: '磷酸二氢钠', model: '25kg/袋', unit: 'kg', category: '辅料', safeStock: 150, currentStock: 195, enabled: true, remark: '' },
  { code: 'MAT-202406-013', name: '无菌滤芯', model: '0.22μm', unit: '个', category: '包装材料', safeStock: 100, currentStock: 80, enabled: true, remark: '' },
  { code: 'MAT-202406-014', name: '葡萄糖粉', model: '10kg/箱', unit: 'kg', category: '辅料', safeStock: 90, currentStock: 70, enabled: false, remark: '即将用尽' },
  { code: 'MAT-202406-015', name: '头孢曲松钠', model: '1kg/袋', unit: 'kg', category: '原料药', safeStock: 50, currentStock: 66, enabled: true, remark: '' }
])

const categoryOptions = ['原料药', '辅料', '包装材料', '制剂成品']

// 搜索逻辑
const search = reactive({ name: '', category: '' })
function doSearch() {
  // 这里可以添加其它搜索相关处理
}
function resetSearch() {
  search.name = ''
  search.category = ''
}
const filteredList = computed(() => {
  return materialList.value.filter(item => {
    const nameMatch = !search.name || item.name.includes(search.name)
    const catMatch = !search.category || item.category === search.category
    return nameMatch && catMatch
  })
})

// 编辑/新增弹窗逻辑
const editDialog = reactive({
  visible: false,
  isEdit: false,
  form: {
    code: '', name: '', model: '', unit: '', category: '', safeStock: 0, currentStock: 0, enabled: true, remark: ''
  },
  editIndex: -1
})
function onAdd() {
  Object.assign(editDialog.form, { code: '', name: '', model: '', unit: '', category: '', safeStock: 0, currentStock: 0, enabled: true, remark: '' })
  editDialog.isEdit = false
  editDialog.editIndex = -1
  editDialog.visible = true
}
function onEdit(row, idx) {
  Object.assign(editDialog.form, row)
  editDialog.isEdit = true
  editDialog.editIndex = materialList.value.findIndex(e => e.code === row.code)
  editDialog.visible = true
}
function onSaveEdit() {
  if (editDialog.isEdit && editDialog.editIndex >= 0) {
    materialList.value[editDialog.editIndex] = { ...editDialog.form }
  } else {
    materialList.value.unshift({ ...editDialog.form })
  }
  editDialog.visible = false
}
function onDelete(idx) {
  materialList.value.splice(idx, 1)
}
</script>

<style scoped>
.material-list-page {
  padding: 20px 30px 30px 30px;
  background: #fff;
  min-height: 100vh;
}
.search-bar {
  margin-bottom: 14px;
}
</style>
